<template>
	<swiper class="swiper" :style="style" vertical circular autoplay>
		<swiper-item v-for="(item, index) in list" :key="index">
			<view class="swiper-item" :style="itemStyle" @tap="$page.open('/pages/article/content?id=' + item.id)">
				<text class="h9 font-weight-600 text-ellipsis-1 text-grey">{{ item.title }}</text>
			</view>
		</swiper-item>
	</swiper>
</template>

<script setup lang="ts">
import { $http, $page } from '@/utils'
import { ref, onMounted, nextTick, defineProps } from "vue";
import { $ResponseCode } from '@/utils/const/env';
const props = withDefaults(defineProps<{
	position: string
	height?: number | string
	rounded?: number | string
}>(), {
	position: '',
	height: 150,
	rounded: 0
});
const emit = defineEmits(['loaded', 'update:show']);
const style = ref({
	height: props.height + 'px',
	'--radius': props.rounded + 'px'
});
const itemStyle = ref({
	height: props.height + 'px'
});
const list = ref<any[]>([]);
onMounted(() => {
	$http.get('Article/getSelect', {
		data: {
			alias: props.position
		}
	}).then((res: any) => {
		if (res.code === $ResponseCode.SUCCESS) {
			list.value = res.data;
			emit('update:show', true)
			nextTick(() => {
				emit('loaded')
			})
		} else {
			list.value = [];
			emit('update:show', false)
			emit('loaded')
		}
	}).catch(() => {
		list.value = [];
		emit('update:show', false)
		emit('loaded')
	})
})
</script>

<style lang="scss" scoped>
.swiper {
	width: 100%;
}

.swiper-item {
	width: 100%;
	display: flex;
	align-items: center;
}

.swiper-image {
	width: 100%;
	height: 100%;
}
</style>